<template>
    <el-container class="dict-container" direction="vertical">
        <el-container>
            <HeaderBtnGroup @handleClick="handleHeaderClick" :config="headerConfig">
            </HeaderBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table :data="targets" v-loading="loadingShow">
                    <el-table-column fixed label="序号" type="index"></el-table-column>
                    <el-table-column fixed label="编号" prop="id"></el-table-column>
                    <el-table-column label="类型" prop="type">
                        <template slot-scope="scope">
                            <span>{{ scope.row.type | typeFilter }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="范围" prop="usageScopes">
                        <template slot-scope="scope">
                            <span>{{ scope.row.usageScopes | usageScopeFilter }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column label="数据/模块" prop="data"></el-table-column>
                    <el-table-column label="生效" prop="enable">
                        <template slot-scope="scope">
                            <span>{{ scope.row.enable ? "是" : "否" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" :width="type != 3 ? 210 : 160" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" v-if="type != 3"
                                @click="handleSetting(scope.row)">配置</el-button>
                            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
        <el-dialog id="el-dialog" title="添加字典" :visible.sync="dialogFormVisible" destroy-on-close
            @close="handleDialogClose" width="500px">
            <el-form :model="form" ref="addForm" label-position="right" :rules="rules">
                <el-form-item label="类型" :label-width="formLableWidth">
                    <el-select v-model="form.type" :disabled="checkParents()" @change="selectChanged"
                        placeholder="请选择类型">
                        <el-option v-for="  item   in   typeOptions  " :key="item.key" :value="item.key"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="范围" :label-width="formLableWidth">
                    <el-select v-model="form.usageScopes" @change="selectChanged" multiple placeholder="请选择范围">
                        <el-option v-for="item in usageScopes" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="checkParents()" label="平台" :label-width="formLableWidth">
                    <el-select v-model="form.parentId" disabled placeholder="请选择平台">
                        <el-option v-for="  item   in   parents  " :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="showSourceType" label="采集" :label-width="formLableWidth">
                    <el-select v-model="form.sourceType" placeholder="请选择采集类型">
                        <el-option v-for="item  in  sourceTypeOptions" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称" :label-width="formLableWidth" prop="name">
                    <el-input v-model="form.name" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item :label="dataName" :label-width="formLableWidth" prop="data">
                    <el-input v-model="form.data" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="生效" :label-width="formLableWidth">
                    <el-switch v-model="form.enable"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="addData('addForm')" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<style lang="scss">
.dict-container {
    .el-select {
        width: 100%;
    }

    .el-dialog__body {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }
}
</style>

<script>
import { DictDao } from "@/dao/dictDao";
import { DeepCopy } from '@/utils/Utils';
import { HeaderBtnMixin } from "@/mixins/HeaderBtnMixin"
import HeaderBtnGroup from "@/components/Common/HeaderBtnGroup"
import { UsageScope, DictType, SourceType } from '@/entities/Constant';

export default {
    name: "Dict",
    mixins: [HeaderBtnMixin],
    props: {
        type: {
            type: Number,
            default: DictType.Platform
        }
    },
    components: {
        HeaderBtnGroup,
    },
    data() {
        return {
            targets: [],
            parents: [],
            dataName: "数据",
            loadingShow: true,
            showSourceType: false,
            formLableWidth: "100px",
            form: DictDao.initialForm(),
            rules: DictDao.initialRules(),
            typeOptions: DictType.Options(),
            usageScopes: UsageScope.Options(),
            sourceTypeOptions: SourceType.Radios(),
            headerConfig: {
                add: this.type == DictType.Platform,
                showPage: false,
                statusBtns: [],
            }
        }
    },
    mounted() {
        this.getTargets()
    },
    methods: {
        handleEdit(row) {
            this.form = DictDao.boolRow(row)
            this.selectChanged()
            this.dialogFormVisible = true
        },
        handleDelete(id) {
            DictDao.delete(id).then(res => {
                this.getTargets()
            })
        },
        handleSetting(row) {
            this.parents = [row]
            this.form = DictDao.toModule(row)
            this.selectChanged()
            this.dialogFormVisible = true
        },
        handleDialogClose() {
            this.form = DictDao.initialForm()
            this.parents = []
        },
        getTargets() {
            this.loadingShow = true
            DictDao.List(this.type).then(result => {
                this.loadingShow = false
                this.targets = result
                console.log("result", result)
            })
        },
        checkParents() {
            return this.parents.length != 0
        },
        checkShowSourceType() {
            let show = (this.form.parentId || this.checkParents()) && this.form.usageScopes.includes(UsageScope.Spider) && this.form.type == DictType.JsModule
            console.log("show", show)
            return show
        },
        selectChanged() {
            if (this.form.type == DictType.JsModule) {
                this.dataName = "模块"
            } else {
                this.dataName = "数据"
            }
            this.showSourceType = this.checkShowSourceType()
        },
        addData(formName) {
            const formData = DeepCopy(this.form)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false
                    DictDao.save(formData).then(res => {
                        console.log("addData", formData, valid, res)
                        this.$nextTick(() => {
                            this.getTargets()
                        })
                    })
                } else { }
            })
        },
    },
    filters: {
        typeFilter(value) {
            let obj = DictType.Options().find(o => o.key == value)
            return obj ? obj.name : ""
        },
        usageScopeFilter(values) {
            if (!values) {
                return ""
            }
            let names = []
            for (let value of values) {
                let usageScope = UsageScope.Options().find((obj) => obj.id == value)
                names.push(usageScope ? usageScope.name : "")
            }
            return names.join(",")
        }
    },
}
</script>
